<template>
	<cl-page statusBarBackground="#fff" background-color="#F1F1F1" :fullscreen="true">
		<cl-sticky>
			<cl-topbar
				:border="false"
				background-color="#fff"
				color="#333"
				:title="t('user.calling.calling')"
			/>
		</cl-sticky>
		<view class="page-info animate__animated animate__fadeIn">
			<cl-form ref="Form" v-model="form" label-position="top">
				<cl-form-item :label="t('user.calling.num')" prop="name">
					<cl-input
						v-model="form.name"
						:placeholder="t('user.calling.placeholder')"
					></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('user.calling.possessor')" prop="name">
					<cl-input
						v-model="form.name"
						:placeholder="t('user.calling.placeholder')"
					></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('user.calling.brandL')" prop="name">
					<cl-input
						v-model="form.name"
						:placeholder="t('user.calling.placeholder')"
					></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('user.calling.no')" prop="name">
					<cl-input
						v-model="form.name"
						:placeholder="t('user.calling.placeholder')"
					></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('user.calling.enum')" prop="name">
					<cl-input
						v-model="form.name"
						:placeholder="t('user.calling.placeholder')"
					></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('user.calling.registerdate')" prop="name">
					<cl-input
						v-model="form.name"
						:placeholder="t('user.calling.placeholder')"
					></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('user.calling.issuedate')" prop="name">
					<cl-input
						v-model="form.name"
						:placeholder="t('user.calling.placeholder')"
					></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('user.calling.cartype')" prop="name">
					<cl-input
						v-model="form.name"
						:placeholder="t('user.calling.placeholder')"
					></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('user.calling.address')" prop="name">
					<cl-input
						v-model="form.name"
						:placeholder="t('user.calling.placeholder')"
					></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('user.calling.nature')" prop="name">
					<cl-input
						v-model="form.name"
						:placeholder="t('user.calling.placeholder')"
					></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('user.calling.authority')" prop="name">
					<cl-input
						v-model="form.name"
						:placeholder="t('user.calling.placeholder')"
					></cl-input>
				</cl-form-item>
				<cl-form-item :label="t('user.calling.cardphoto')" prop="name">
					<view class="photo flex flex-between align-center">
						<view class="info">
							<image
								class="img"
								src="/static/images/banner1.jpg"
								mode="aspectFill"
							></image>
							<view class="text">{{ $t("user.calling.home") }}</view>
						</view>
						<view class="info">
							<image
								class="img"
								src="/static/images/banner2.jpg"
								mode="aspectFill"
							></image>
							<view class="text">{{ $t("user.calling.second") }}</view>
						</view>
					</view>
				</cl-form-item>
			</cl-form>
			<view class="btn">{{ $t("user.calling.change") }}</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import { ref, reactive } from "vue";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user } = useStore();
const ui = useUi();
const app = useApp();
const form = ref({});
const more = () => {
	router.push("/pages/user/drivingLicense/edit");
};
</script>

<style lang="scss" scoped>
.page-info {
	padding: 30rpx;

	:deep(.cl-form-item__label) {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 32rpx;
		color: #666666;
		margin-bottom: 0 !important;
	}

	:deep(.cl-input) {
		height: 88rpx;
		background: #ffffff;
		border-radius: 8rpx;
		border: 1px solid #dddddd;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
	}

	:deep(.cl-form-item) {
		margin-bottom: 0rpx !important;
	}

	.photo {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 8rpx;

		.info {
			width: 300rpx;
			height: 200rpx;
			border-radius: 20rpx;
			position: relative;
			overflow: hidden;

			.img {
				width: 100%;
				height: 100%;
			}

			.text {
				width: 100%;
				height: 40rpx;
				background: rgba($color: #000000, $alpha: 0.5);
				line-height: 40rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				position: absolute;
				text-indent: 30rpx;
				left: 0;
				bottom: 0;
				color: #ffffff;
			}
		}
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient(0deg, #0c81f7 0%, #44a1ff 100%);
		border-radius: 20rpx;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 38rpx;
		color: #ffffff;
		line-height: 88rpx;
		text-align: center;
		margin-top: 30rpx;
	}
}
</style>
